<template>
  <div>
    <!-- 搜索结果在地图呈现模块 -->
    <div class="searchResultsOnMapBoxMask" v-if="isShowFacilitiesSearchResultsPart">
      <div :class="isSearchResultsBoxOpen?'searchResultsOnMapBoxOpen':'searchResultsOnMapBoxClose'">
        <div class="searchResultsOnMap">
          <div class="searchResultsOnMapTopBar">
            <span class="searchResultsOnMapTopBarTitle">搜索结果如下</span>
            <span class="searchResultsOnMapBoxCloseBtn" @click="hidesearchResults()"></span>
          </div>
          <div class="searchResultsOnMapTelescopic">
            <div class="searchResultsOnMapContainer">
              <li
                @click="resultInMap(item.BN,item.FloorID,item.PI,item.BN,false)"
                v-for="(item,index) in afterFastSearchData"
                :key="index"
              >
                <div>
                  <span class="positionPic"></span>
                </div>
                <div>
                  <div>
                    <span>{{item.BN}}</span>
                    <span>{{item.T}} {{$store.state.mapConfig.allFloorName[item.FloorID]}}</span>
                  </div>
                  <div class="searchResultsEnterDetailsBtn">
                    <span></span>
                  </div>
                </div>
              </li>
            </div>
            <div class="searchResultsOnMapNoMore">{{searchResultsInfo}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    afterFastSearchData: Array
  },
  data() {
    return {
      // 公共设施快速搜索底部信息提示
      searchResultsInfo: null,
      // 是否显示公共设施搜索结果部分
      isShowFacilitiesSearchResultsPart: false,
      // 是否弹起搜索结果部分
      isSearchResultsBoxOpen: false
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    // 从搜索页 搜索按钮进入搜索结果弹出
    toSearchResultsOnMap() {
      
      const self = this;

      // 显示公共设施搜索结果
      this.isShowFacilitiesSearchResultsPart = true;
      setTimeout(() => {
        this.isSearchResultsBoxOpen = true;
      }, 200);

      let dataNoMatch = false;


      if (this.afterFastSearchData.length > 0) {


        this.afterFastSearchData.forEach(e => {
          if (!this.$store.state.mapConfig.allFloorName[e.FloorID]) {
            dataNoMatch = true;
          }
        });

        if (!dataNoMatch) {
          // 底部信息提示
          this.searchResultsInfo = "没有更多了";

          // 楼层排序
          this.afterFastSearchData.sort(this.comparefloor("FloorID"));
        } else {
          // 底部信息提示
          this.searchResultsInfo = "很抱歉，没有该数据~";
        }
      }
    },
    // 关闭公共设施结果
    hidesearchResults() {
      this.isSearchResultsBoxOpen = false;
      setTimeout(() => {
        this.isShowFacilitiesSearchResultsPart = false;
      }, 500);
    },
    // 楼层排序方法
    comparefloor(property) {
      const self = this;
      return function(a, b) {
        if (a[property]) {
          if (a[property] != "" || b[property] != "") {
            let value1 = parseInt(
              self.$store.state.mapConfig.floorsOrder[a[property]]
            );
            let value2 = parseInt(
              self.$store.state.mapConfig.floorsOrder[b[property]]
            );
            return value1 - value2;
          }
        }
      };
    },
    // 点击搜索结果转至地图页面
    resultInMap(shopName, floorID, pointID, name, ls) {


      // 关闭语音识别部分
      this.$store.commit("updateIsShowSpeechRecognition", false);

      // 如果寻路信息部分显示的情况
      if(this.$store.state.isShowOperation){
        this.$store.commit('updateIsShowSearchInput',false);
      }


      // 更新输入框内容
      this.$store.commit("updataSearchInputVal", shopName);
      // 图标改为搜索图标
      this.$store.commit("updateIsBackOrSearch", false);
      // 关闭公共设施结果
      this.hidesearchResults();
      // 跳转店铺
      map.selectByID(pointID, true);
      // 更新当前显示楼层名称
      this.$store.commit(
        "updateNowFloor",
        this.$store.state.mapConfig.allFloorName[floorID]
      );
      //关闭搜索部分
      this.$store.commit("updateIsShowSearchContent", false);

      //判断历史记录中是否存在过该nodeID,若存在则不放入历史记录中
      let historyRecordList = {},
        canInsertToHistoryList = false;

      if (this.$store.state.searchHistoryRecordList.length > 0) {
        for (
          let i = 0;
          i < this.$store.state.searchHistoryRecordList.length;
          i++
        ) {
          if (this.$store.state.searchHistoryRecordList[i].pointID == pointID) {
            canInsertToHistoryList = false;
            break;
          } else {
            canInsertToHistoryList = true;
          }
        }
      } else {
        canInsertToHistoryList = true;
      }

      //生成历史记录
      if (!ls && canInsertToHistoryList) {
        historyRecordList.pointID = pointID;
        historyRecordList.floorID = floorID;
        historyRecordList.shopName = shopName;

        this.$store.commit("updateSearchHistoryRecordList", historyRecordList);
        this.$store.commit("updateIsShowRecordInfo", true);
      }
    }
  },
  components: {}
};
</script>

<style lang='less'>
// 搜索结果在地图呈现模块
.searchResultsOnMapBoxMask {
  top: 0;
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  .searchResultsOnMapBoxClose {
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0rem;
    border-radius: 0.06rem;
    box-sizing: border-box;
    transition: all 0.5s;
    .searchResultsOnMap {
      width: 100%;
      height: auto;
      background-color: #ffffff;
      border-radius: 3px;
      box-sizing: border-box;
      .searchResultsOnMapTopBar {
        width: 100%;
        height: 40px;
        background-color: #f7f7f3;
        align-items: center;
        display: -webkit-flex;
        justify-content: center;
        display: -webkit-flex;
        border-radius: 3px;
        .searchResultsOnMapTopBarTitle {
          font-size: 14px;
          display: inline-block;
        }
        .searchResultsOnMapBoxCloseBtn {
          position: absolute;
          right: 0rem;
          width: 35px;
          height: 35px;
          background: url("../assets/images/closeBtn.png") no-repeat center;
          background-size: 35%;
        }
      }
      .searchResultsOnMapTelescopic {
        width: 100%;
        height: auto;
        max-height: 468px;
        min-height: 468px;
        overflow: auto;
        .searchResultsOnMapNoMore {
          font-size: 12px;
          color: #aaaaaa;
          width: 100%;
          height: 40px;
          text-align: center;
          line-height: 40px;
        }
        .searchResultsOnMapContainer {
          width: 100%;
          li {
            width: 100%;
            height: 59px;
            display: flex;
            flex-flow: row;
            div:nth-of-type(1) {
              width: 47.5px;
              height: 59px;
              align-items: center;
              display: -webkit-flex;
              justify-content: center;
              display: -webkit-flex;
              span {
                width: 16px;
                height: 16px;
                display: inline-block;
                background-image: url("../assets/images/locationPic.png");
                background-size: 16px;
                background-repeat: no-repeat;
              }
            }
            div:nth-of-type(2) {
              flex: 1;
              border-bottom: 0.5px solid #e5e5e5;
              box-sizing: border-box;
              display: flex;
              flex-flow: row;
              div:nth-of-type(1) {
                flex: 1;
                display: flex;
                flex-flow: column;
                padding: 12.5px 0 12.5px 5px;
                span:nth-child(1) {
                  font-size: 13px;
                  color: #595959;
                }
                span:nth-child(2) {
                  font-size: 11px;
                  color: #aaaaaa;
                }
              }
              div:nth-of-type(2) {
                width: 47.5px;
                height: 100%;
                align-items: center;
                display: -webkit-flex;
                justify-content: center;
                display: -webkit-flex;
                span {
                  width: 15px;
                  height: 16px;
                  display: inline-block;
                  background-image: url("../assets/images/icon_liebiao_xiangqing.png");
                  background-size: 15px 16px;
                  display: none;
                }
              }
            }
          }
        }
      }
      .searchResultsOnMapTelescopic::-webkit-scrollbar {
        display: none;
      }
    }
  }
  .searchResultsOnMapBoxOpen {
    height: 508px;
    width: 100%;
    position: absolute;
    bottom: 0rem;
    border-radius: 0.06rem;
    box-sizing: border-box;
    transition: all 0.5s;
  }
  .searchResultsOnMap {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    border-radius: 3px;
    box-sizing: border-box;
    .searchResultsOnMapTopBar {
      width: 100%;
      height: 40px;
      background-color: #f7f7f3;
      align-items: center;
      display: -webkit-flex;
      justify-content: center;
      display: -webkit-flex;
      border-radius: 3px;
      .searchResultsOnMapTopBarTitle {
        font-size: 14px;
        display: inline-block;
      }
      .searchResultsOnMapBoxCloseBtn {
        position: absolute;
        right: 0rem;
        width: 35px;
        height: 35px;
        background: url("../assets/images/closeBtn.png") no-repeat center;
        background-size: 35%;
      }
    }
    .searchResultsOnMapTelescopic {
      width: 100%;
      height: auto;
      max-height: 468px;
      min-height: 468px;
      overflow: auto;
      .searchResultsOnMapNoMore {
        font-size: 12px;
        color: #aaaaaa;
        width: 100%;
        height: 40px;
        text-align: center;
        line-height: 40px;
      }
      .searchResultsOnMapContainer {
        width: 100%;
        li {
          width: 100%;
          height: 59px;
          display: flex;
          flex-flow: row;
          div:nth-of-type(1) {
            width: 47.5px;
            height: 59px;
            align-items: center;
            display: -webkit-flex;
            justify-content: center;
            display: -webkit-flex;
            .positionPic {
              width: 16px;
              height: 16px;
              display: inline-block;
              background-image: url("../assets/images/locationPic.png");
              background-size: 16px;
              background-repeat: no-repeat;
            }
          }
          div:nth-of-type(2) {
            flex: 1;
            border-bottom: 0.5px solid #e5e5e5;
            box-sizing: border-box;
            display: flex;
            flex-flow: row;
            div:nth-of-type(1) {
              flex: 1;
              height: 100%;
              position: relative;
              span:nth-child(1) {
                width: 100%;
                position: absolute;
                height: 30px;
                font-size: 13px;
                color: #595959;
                top: 0;
                left: 0;
                line-height: 40px;
              }
              span:nth-child(2) {
                width: 100%;
                position: absolute;
                height: 29px;
                font-size: 11px;
                color: #aaaaaa;
                bottom: 0;
                left: 0;
                line-height: 24px;
              }
            }
            div:nth-of-type(2) {
              width: 47.5px;
              height: 100%;
              align-items: center;
              display: -webkit-flex;
              justify-content: center;
              display: -webkit-flex;
              span {
                width: 15px;
                height: 16px;
                display: inline-block;
                background-image: url("../assets/images/icon_liebiao_xiangqing.png");
                background-size: 15px 16px;
                display: none;
              }
            }
          }
        }
      }
    }
    .searchResultsOnMapTelescopic::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
